<template>
  <vant-form
    :validate-first="true"
    class="page-p-l page-p-r"
    input-align="right"
    @submit="onSubmit"
  >
    <!-- <div class="adjust-page"> -->
    <vant-cell title="申请单号" :value="reqNo" />
    <vant-cell title="协调后意见" class="vant-cell-l">
      <template #right-icon>{{idea}}</template>
    </vant-cell>

    <vant-cell title="建议路线" class="vant-cell-l">
      <template #right-icon>{{routes}}</template>
    </vant-cell>
    <van-cell title="是否采纳建议路线">
      <template #right-icon>
        <van-radio-group v-model="accept" direction="horizontal">
          <van-radio name="1">采纳</van-radio>
          <van-radio name="0">不采纳</van-radio>
        </van-radio-group>
      </template>
    </van-cell>
    <vant-field
      name="uploader"
      label="护送方案"
      :rules="[{ validator, message: '请上传文件' }]"
      class="vant-cell-l"
    >
      <template #input>
        <app-uploader
          v-model="fileList"
          :max-count="maxCount"
          accept=".png, .jpeg, .jpg, .doc, .docx, .pdf"
        />
      </template>
    </vant-field>

    <van-notice-bar wrapable :scrollable="false">
      <p direction="horizontal">请仔细阅读建议路线（只包含审批过程中需修改路线的省份）。采纳建议路线，相关省份进行快速审批；不采建议路线，视为放弃本次申请。</p>
    </van-notice-bar>
    <vant-cell>
      <vant-button round block type="danger">提交</vant-button>
    </vant-cell>
    <!-- </div> -->
  </vant-form>
</template>

<script>
export default {
  data() {
     const {reqNo=''}=this.$route.query
    return {
      reqNo,
      idea: `因XX原因，之前申请路线无法通行。相关省份已给出建议路线。

    请承运人确认路线。`,
      routes: `北京市：【xx界】【G15高速--dd线】【xx界】

河北省：【xx界】【G6高速--uu线】【xx界】`,
      accept: '1',
      maxCount: 1,
      fileList: '',
    }
  },
  methods: {
    validator(val) {
      return val && val.length === this.maxCount
    },
    onSubmit() { }
  }
}
</script>

<style lang="less" scoped>
.adjust-page {
  width: 100%;
}
</style>